<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script type="text/javascript" src="jquery-1.11.2.js"></script>
  <script type="text/javascript" src="jquery.validator.plugin.js"></script>
  <script type="text/javascript">
	//自定义结果处理
	$.extend({
		validateResult : function(isValidate, fields, passes, errors) {
			$(passes).parent().find("span").remove();
			$(passes).after($("<span style='color:green;'>√</span>"));

			$(errors).each(function() {
				$(this.field).parent().find("span").remove();
				$(this.field).after($("<span style='color:red;'>"+this.error+"</span>"));
			});
			
		}
	});
	//自定义校验
	$.extend($.validators, {

		myvalidator : {
			error:"{*}：自定义校验没通过，参数：{0},{1}.",
			validate:function(args) {
				var value = $(this).val();
				//
				return false;
			}
		}

	})

	$(function() {
		$("[valid]").blur(function() {
			$(this).validate();
		});
		$("button").click(function() {
			if($("form").validate()) {
				alert("校验通过");
			}
		});
	});
  </script>
 </head>
 <body>
  <form>
	<div>账户：<input type="text" name="account" value="" label="账户" valid="required:true,chars:true" /></div>
	<div>姓名：<input type="text" name="name" value="" label="姓名" valid="required:true,max:10,min:5" errors="required:'请填写{*}',min:'{*}长度不够'" /></div>
	<div>年龄：<input type="text" name="age" value="" label="年龄" valid="required:true,number:true,ng:300,nl:1" /></div>
	<div>手机号：<input type="text" name="mobile" label="手机号码" valid="required:true,must:11,mobile:true" /></div>
	<div>电话号码：<input type="text" name="telphone" label="电话号码" valid="required:true,telphone:true" /></div>
	<div>每周花钱：<input type="text" name="money" label="人民币" valid="required:true,decimal:2" /></div>
	<div>邮箱：<input type="text" name="email" label="邮箱" valid="required:true,email:true" /></div>
	<div>密码：<input type="password" name="password" label="密码" valid="required:true,min:6,max:30" /></div>
	<div>确认密码：<input type="password" name="confirmPassword" valid="required:true,mustbe:$('[name=password]').val()" errors="mustbe:'两次输入密码不一致.'"/></div>
	<div>身份证：<input type="text" name="idcard" value="" label="身份证" valid="required:true,idcard:true" /></div>
	<div>[10&lt;?&lt;20]：<input type="text" name="idcard" value="" label="数字" valid="required:true,number:true,gt:10,lt:20" /></div>
	<div>自定义校验示例：<input type="text" name="mine" value="" label="我的" valid="myvalidator:['arg_0', 'arg_1']" /></div>
	<button type="button">校验</button>
  </form>
 </body>
</html>
